<template>
  <div class="dashboard-container">
    <div class="dashboard-text">欢迎用户: {{ name }}</div>
    <div class="dashboard-item" v-if="editorVisble && tableData.length > 0">
      您有{{ tableData.length }}件工具即将到期或已经过期
    </div>
    <div class="dashboard-item" v-if="editorVisble && tableData.length > 0">
      <el-table :data="tableData" stripe>
        <el-table-column label="工具名称" prop="name"></el-table-column>
        <el-table-column label="工具编号" prop="barcode"></el-table-column>
        <el-table-column label="工具件号" prop="partNo"></el-table-column>
        <el-table-column label="存放地点" prop="storage"></el-table-column>
        <el-table-column label="到期时间" prop="expireDate"></el-table-column>
        <el-table-column label="工具状态" prop="status">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 0">正常</span>
            <span v-else-if="scope.row.status === 1">隔离</span>
            <span v-else-if="scope.row.status === 2">报废</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="isolate(scope.row)" type="text" size="small"
              >隔离</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="dashboard-item" v-if="editorVisble && hangCaiList.length > 0">
      您有{{ hangCaiList.length }}件耗材数量已不足20！，请尽快购买！
    </div>
    <div class="dashboard-item" v-if="editorVisble && hangCaiList.length > 0">
      <el-table :data="hangCaiList" stripe>
        <el-table-column label="工具名称" prop="name"></el-table-column>
        <el-table-column label="工具编号" prop="barcode"></el-table-column>
        <el-table-column label="工具件号" prop="partNo"></el-table-column>
        <el-table-column label="存放地点" prop="storage"></el-table-column>
        <el-table-column label="库内总数" prop="allNumber"></el-table-column>
        <el-table-column label="可用数量" prop="userableNum"></el-table-column>
        <el-table-column label="工具状态" prop="status">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 0">正常</span>
            <span v-else-if="scope.row.status === 1">隔离</span>
            <span v-else-if="scope.row.status === 2">报废</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import toolApi from "@/api/tool/index";
import store from "@/store";
export default {
  name: "Dashboard",
  data() {
    return {
      tableData: [],
      editorVisble: false, //如果是管理员登录，则显示这些功能，如果不是，则不显示
      hangCaiList: [],
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  methods: {
    isolate(data) {
      toolApi.isolate(data.id, 1).then((res) => {
        this.$message({
          message: "设置成功",
          type: "success",
        });
        this.getList();
      });
    },
    getList() {
      toolApi.getUnUsedTool().then((res) => {
        this.tableData = res.data;
      });
      toolApi.getHangCaiList().then((res) => {
        this.hangCaiList = res.data;
      });
    },
  },
  created() {
    this.getList();
    if (store.getters.roles.includes("admin")) {
      this.editorVisble = true;
    } else {
      this.editorVisble = false;
    }
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.dashboard-item {
  margin-top: 20px;
  color: red;
}
</style>
